<template>
    <transition name="el-zoom-in-center">
        <div class="SHZY-preview-main">
            <div class="SHZY-common-page-header">
                <el-page-header @back="goBack" :content="!dataForm.id ? '新建' : '编辑'" />
                <div class="options">
                    <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
                    <el-button @click="goBack">取 消</el-button>
                </div>
            </div>
            <div :style="{ margin: '0 auto', width: '100%' }">
                <el-row :gutter="15" class=" main">
                    <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right"
                             :rules="rules">
                        <!--<el-col :span="24">
                            <el-form-item label="报检类型" prop="fullName">
                                <el-select v-model='dataForm.fullName' placeholder='请选择' required disabled :style='{"width":"100%"}' filterable >
                                    <el-option v-for="(item, index) in fullNameOptions" :key="index" :label="item.fullName" :value="item.enCode" ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>-->
                        <el-col :span="24">
                            <el-form-item label-width="0">
                                <!--<div class="SHZY-common-title">
                                    <h2>设计子表</h2>
                                </div>-->
                                <el-table :data="dataForm.qmsBusiInspectionlotList" size='mini'>
                                    <el-table-column type="index" width="50" label="序号" align="center" />
                                    <el-table-column prop="materialCode" label="物料" min-width="140">
                                        <template slot="header">
                                            <span class="required-sign">*</span>物料
                                        </template>
                                        <template slot-scope="scope">
                                            <!-- <el-select v-model="scope.row.materialCode" :style='{"width":"100%"}' placeholder='请选择' clearable required>
                                                <el-option v-for="(item, index) in materialOptions" :key="index" :label="item.name" :value="item.code" :disabled="item.disabled"></el-option>
                                            </el-select> -->

                                            <SHZY-select :list="materialOptions" v-model:bindValue="scope.row.materialCode"
                                                         label="name" value="code" placeholder="请选择物料" isConcat concatSymbol=" / ">
                                            </SHZY-select>

                                            <!--<SHZY-select :list="materialOptions" v-model:bindValue="scope.row.materialCode"
                                            label="name" value="code" placeholder="请选择"></SHZY-select>-->

                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="supplier" label="供应商" min-width="120">
                                        <template slot="header">
                                            <span class="required-sign">*</span>供应商
                                        </template>
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.supplier" :style='{ "width": "100%" }'
                                                       placeholder='请选择' filterable required>
                                                <el-option v-for="(item, index) in supplierOptions" :key="index"
                                                           :label="item.name" :value="item.code"
                                                           :disabled="item.disabled"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="incomingQty" label="来料数量" width="160">
                                        <template slot="header">
                                            <span class="required-sign">*</span>来料数量
                                        </template>
                                        <template slot-scope="scope">
                                            <el-input-number v-model="scope.row.incomingQty" :min="0" placeholder='来料数量' required
                                                             :step='1' :style='{ "width": "100%" }'>
                                            </el-input-number>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="batchNumber" label="批次号">
                                        <template slot="header">
                                            <span class="required-sign">*</span>批次号
                                        </template>
                                        <template slot-scope="scope">
                                            <!--<el-select v-model="scope.row.batchNumber" :style='{"width":"100%"}' placeholder='请选择' clearable required>
                                                <el-option v-for="(item, index) in batchNumberOptions" :key="index" :label="item.fullName" :value="item.id" :disabled="item.disabled"></el-option>
                                            </el-select>-->
                                            <el-input v-model='scope.row.batchNumber' placeholder='批次号' clearable required
                                                      :style='{ "width": "100%" }'>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="orderNo" label="采购订单号">
                                        <template slot="header">
                                            <span class="required-sign">*</span>采购订单号
                                        </template>
                                        <template slot-scope="scope">
                                            <!--<el-select v-model="scope.row.orderNo" :style='{"width":"100%"}' placeholder='请选择' clearable>
                                                <el-option v-for="(item, index) in orderNoOptions" :key="index" :label="item.fullName" :value="item.id" :disabled="item.disabled"></el-option>
                                            </el-select>-->
                                            <el-input v-model="scope.row.orderNo" placeholder="采购订单号" clearable required />
                                        </template>
                                    </el-table-column>
                                    <!--检验员-->
                                    <el-table-column prop="employeeName" label="检验员">
                                        <template slot="header">
                                            检验员
                                        </template>
                                        <template slot-scope="scope">
                                            <user-select v-model="scope.row.employeeCode" placeholder="检验员" @change="onChange(scope.row, arguments)" />
                                        </template>
                                    </el-table-column>
                                    <!--/检验员-->
                                    <el-table-column prop="inspectType" label="检验类型">
                                        <template slot="header">
                                            检验类型
                                        </template>
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.inspectType" :style='{ "width": "100%" }'
                                                       placeholder='请选择' clearable required>
                                                <el-option v-for="(item, index) in inspectTypeOptions" :key="index"
                                                           :label="item.fullName" :value="item.enCode"
                                                           :disabled="item.disabled"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="remark" label="备注">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.remark" :style='{ "width": "100%" }'
                                                      placeholder='请输入' clearable maxlength='200'>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="50">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="text" class="SHZY-table-delBtn"
                                                       @click="handleDelQmsBusiInspectionlotEntityList(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="table-actions" @click="addHandleQmsBusiInspectionlotEntityList()">
                                    <el-button type="text" icon="el-icon-plus">新增</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
        </div>
    </transition>
</template>
<script>
    import restAPI from '@/api/q1/business/inspection';
    import request from '@/utils/request'
    import { GetSupplierAll } from '@/api/q1/basedata/supplier';
    import { getMaterialAll } from '@/api/q1/basedata/material';
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
    import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
    export default {
        components: {},
        props: [],
        data()
        {
            return {
                btnLoading: false,
                loading: false,
                visible: false,
                dataForm: {
                    id: '',
                    fullName: undefined,
                    qmsBusiInspectionlotList: [],
                },
                rules: {
                    fullName: [
                        {
                            required: true,
                            message: '请输入报检类型',
                            trigger: '"change"'
                        },
                    ],
                },
                fullNameOptions: [],
                materialOptions: [],
                supplierOptions: [],
                batchNumberOptions: [],
                orderNoOptions: [],
                inspectTypeOptions: [],
            }
        },
        computed: {},
        watch: {},
        created()
        {
            GetSupplierAll().then(res =>
            {
                this.supplierOptions = res.data.list;
            });
            getMaterialAll().then(res =>
            {
                this.materialOptions = res.data.list;
                console.log(this.materialOptions)
            });
            // 447911071227838981
            getDictionaryDataSelector('458162035063023429').then(res =>
            {
                this.inspectTypeOptions = res.data.list
            });
        },
        mounted()
        {
        },
        methods: {
            init(id)
            {
                this.dataForm.id = id || 0;
                this.visible = true;
                this.$nextTick(() =>
                {
                    this.$refs['elForm'].resetFields();
                    this.dataForm.qmsBusiInspectionlotList = [];
                    if (this.dataForm.id)
                    {
                        restAPI.getInspectionInfo(this.dataForm.id).then(res =>
                        {
                            this.dataForm = res.data;
                        }).catch(ex =>
                        {
                            console.log(ex);
                        });
                    }
                });
                this.$store.commit('generator/UPDATE_RELATION_DATA', {})
            },
            qmsBusiInspectionlotExist()
            {
                let isOk = true;
                for (let i = 0; i < this.dataForm.qmsBusiInspectionlotList.length; i++)
                {
                    const e = this.dataForm.qmsBusiInspectionlotList[i];
                    if (!e.materialCode)
                    {
                        this.$message({
                            message: '物料不能为空',
                            type: 'error',
                            duration: 1000
                        });
                        isOk = false
                        break
                    }
                    if (!e.supplier)
                    {
                        this.$message({
                            message: '供应商不能为空',
                            type: 'error',
                            duration: 1000
                        });
                        isOk = false
                        break
                    }
                    if (!e.incomingQty)
                    {
                        this.$message({
                            message: '来料数量不能为空',
                            type: 'error',
                            duration: 1000
                        });
                        isOk = false
                        break
                    }
                    if (!e.batchNumber)
                    {
                        this.$message({
                            message: '批次号不能为空',
                            type: 'error',
                            duration: 1000
                        });
                        isOk = false
                        break
                    }
                    if (!e.orderNo)
                    {
                        this.$message({
                            message: '采购订单号',
                            type: 'error',
                            duration: 1000
                        });
                        isOk = false
                        break
                    }
                    /*
                    if (!e.inspectType)
                    {
                        this.$message({
                            message: '检验类型不能为空',
                            type: 'error',
                            duration: 1000
                        });
                        isOk = false
                        break
                    }
                    */
                }
                return isOk;
            },
            goBack()
            {
                this.$emit('refresh')
            },
            onChange(row, data)
            {
                //console.log(row, data);

                if (!data[1]) return row.employeeName = ''
                row.employeeName = data[1].fullName
            },
            dataFormSubmit()
            {
                if ((this.dataForm.qmsBusiInspectionlotList || []).length == 0)
                {
                    this.$message({
                        message: '报检项目不能为空！',
                        type: 'error',
                        duration: 3000
                    });
                    return;
                }
                this.$refs['elForm'].validate((valid) =>
                {
                    if (valid)
                    {
                        if (!this.qmsBusiInspectionlotExist()) return;
                        this.btnLoading = true;
                        if (!this.dataForm.id)
                        {
                            //
                            restAPI.createInspection(this.dataForm.qmsBusiInspectionlotList).then((res) =>
                            {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () =>
                                    {
                                        this.btnLoading = false;
                                        this.visible = false;
                                        this.$emit('refresh', true)
                                    }
                                });
                            }).catch(ex =>
                            {
                                console.log(ex);
                                this.btnLoading = false;
                            });
                        }
                        else
                        {
                            restAPI.updateInspection(this.dataForm.qmsBusiInspectionlotList).then((res) =>
                            {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () =>
                                    {
                                        this.btnLoading = false;
                                        this.visible = false
                                        this.$emit('refresh', true)
                                    }
                                })
                            })
                        }
                    }
                })
            },
            addHandleQmsBusiInspectionlotEntityList()
            {
                let item = {
                    materialCode: undefined,
                    supplier: undefined,
                    incomingQty: undefined,
                    batchNumber: undefined,
                    orderNo: undefined,
                    employeeName: undefined,
                    inspectType: undefined,
                    remark: undefined,
                }
                this.dataForm.qmsBusiInspectionlotList.push(item)
            },
            handleDelQmsBusiInspectionlotEntityList(index)
            {
                this.dataForm.qmsBusiInspectionlotList.splice(index, 1);
            },
        }
    }
</script>
